//使用JQuery
/*
$(document).ready(function(){
    alert("恭喜开始JQuery的学习之旅~~");
});
$(function(){
    alert("痛并快乐着！");
})
window.onload=function(){
    alert("JQuery既简单又复杂！");
}
window.onload=function(){
    alert("JQuery开发快但效率低！");
}

window.addEventListener("load",function(){
    alert(1);
},false)

window.addEventListener("load",function(){
    alert(2);
},false)
*/

$(function(){
    /*
    //使用标签选择器获取元素
    $("p").css("color","red");
    //使用类选择器获取元素
    $(".sty1").css("color","blue");
    //使用id选择器获取元素
    $("#id1").css("color","green");
    //使用并集选择器获取元素
    $("#id1,.sty1,p").css("color","purple");
    //使用交集选择器获取元素
    $("h3.sty1").css("color","darkgoldenrod");
    //使用全局选择器获取元素
    $("*").css("color","silver");
    */

    //使用后代选择器获取元素
    //$("div p").css("color","rgb(62, 199, 174)");
    //使用子选择器获取元素
    //$("div>p").css("color","rgb(62, 199, 174)");
    //使用相邻元素选择器获取元素
    //$("strong+p").css("color","deeppink");
    //使用同辈元素选择器获取元素
    //$("strong~p").css("color","deeppink");

    //使用属性选择器获取元素
    //$("[href]").css("color","yellowgreen");
    //$("[href='123.html']").css("color","yellowgreen");
    //$("[href^='1']").css("color","yellowgreen");
    //$("[href$='m']").css("color","yellowgreen");
    //$("[href*='4']").css("color","yellowgreen");
    //$("[href!='1234.html']").css("color","yellowgreen");

    //使用过滤选择器获取元素
    //$("ul li:first").css("color","sandybrown");
    //$("ul li:last").css("color","sandybrown");
    //$("ul li:not(.sty1)").css("color","sandybrown");
    //$("li:even").css("color","sandybrown");
    //$("li:odd").css("color","sandybrown");
    //$("li:eq(2)").css("color","sandybrown");
    //$("li:gt(2)").css("color","sandybrown");
    //$("li:lt(2)").css("color","sandybrown");

    $("#btn").click(function(){
        fengzhuang();
    });

    //document.getElementById("id2").style.color="red";
    $(document.getElementById("id2")).css("color","red");

    $("<p>创建的p</p>").css("color","red").appendTo($(document.body));

    //document.getElementById("chk").checked=true;
    //$("#chk").checked=true;
    $("#chk").get(0).checked=true;
})

function fn1(){
    $("h4:visible").css("display","none");
}

function fn2(){
    $("h4:hidden").css("display","block");
}

$("#btn").click(function(){
    alert(123);
});

function fengzhuang(){
    console.log(1);
    console.log(2);
    console.log(3);
    console.log(4);
    console.log(5);
}